<template>
  <div id="app">


    </zhangtong>

    <el-button type="primary" style="margin-top:20px" @click="tellSelectNM">click me ~~</el-button>

    <el-button @click="searchChildren"> 点我查看children</el-button>
    <zhangtong ref="zz" @tellMeTheInput="tellInputNM" @tellSelect1="tellSelectNM"  :data="zt_cpn">
        <!-- 具名插槽 元素中添加 slot属性 value值为插槽的name值  -->
    <!-- <el-input slot="left" placeholder="slot的作用" ></el-input>
        
        </zhangtong> -->


        <!-- 组件区域 -->
    <!-- 
    <ZTHeader :data="type1"></ZTHeader>
    <ZTHeader :data="type2"></ZTHeader>
    <ZTHeader :data="type3"></ZTHeader>
    <ZTHeader :data="type4"></ZTHeader>
    <ZTHeader :data="type5"></ZTHeader> -->

    <!-- <ZTSelect :actionData="actionData"></ZTSelect> -->
    <!-- <ZTTable :actionData="actionData"></ZTTable> -->
    <!-- <ZTDrawer></ZTDrawer> -->
    <!-- <ZTTime></ZTTime> -->
    <!-- 06组件 -->
    <ZTDialog></ZTDialog>
    <!-- <ZTNote></ZTNote> -->

        <!-- 具名插槽 元素中添加 slot属性 value值为插槽的name值  -->
    <!-- <el-input slot="left" placeholder="slot的作用" ></el-input>
        
        </zhangtong> -->


        <!-- 组件区域 -->
    <!-- 
    <ZTHeader :data="type1"></ZTHeader>
    <ZTHeader :data="type2"></ZTHeader>
    <ZTHeader :data="type3"></ZTHeader>
    <ZTHeader :data="type4"></ZTHeader>
    <ZTHeader :data="type5"></ZTHeader> -->

    <!-- <ZTSelect :actionData="actionData"></ZTSelect> -->
    <!-- <ZTTable :actionData="actionData"></ZTTable> -->
    <!-- <ZTDrawer></ZTDrawer> -->
    <!-- <ZTTime></ZTTime> -->
    <ZTDialog></ZTDialog>
    <!-- <ZTNote></ZTNote> -->

  </div>
</template>

<script>
// import zhangtong from './components/zhangtong'
import ZTHeader from "./components/cpnHeader";
import ZTSelect from "./components/cpnSelect";
import ZTTable from "./components/cpnTable";
import ZTDrawer from "./components/cpnDrop"
import ZTTime from "./components/cpnTime"
import ZTDialog from "./components/cpnDialog"
import ZTNote from "./components/cpnNote"
import HelloWorld from "./components/HelloWorld";
// import zhangtong from './components/zhangtong'
import Zhangtong from "./components/zhangtong.vue";

// // 2.注册组件 该方式注册组件
// Vue.component('my-demo',demo)
export default {
  name: "App",
  data() {
    return {
      actionData: {
        path: "/momeapi/minicrmapp/test/filter/",
        postData: {
        "_id": "5fdac51570a56dffacfd8fbb",
        "company_id": "abc",
        "app_id": "abc",
        "module_id": "bbc",
        "role_id": "222",
        "layout_id": "888888",
        },
      },
      zt_cpn: {
        input: {
          isUse: true,
          number: 2,
          label: ["请输入我爱你", "请输入一万次悲伤"],
          value: [],
        },
        select: {
          isUse: true,
          number: 2,
          options: [
            {
              value: "选项1",
              label: "黄金糕",
            },
            {
              value: "选项2",
              label: "双皮奶",
            },
            {
              value: "选项3",
              label: "蚵仔煎",
            },
            {
              value: "选项4",
              label: "龙须面",
            },
            {
              value: "选项5",
              label: "北京烤鸭",
            },
          ],
          value:[]
        },
        say: "我爱你",
      },
      type1: 1,
      type2: 2,
      type3: 3,

      type4: 4,
      type5: 5,
    };
  },
  components: {
    ZTHeader,
    ZTSelect,
    ZTTable,
    ZTDrawer,
    ZTTime,
    ZTDialog,
    ZTNote
  },
  methods: {
    say() {
      alert("213");
    },
    tellSelectNM(e) {
      console.log("我是父组件", e);
    },
    tellInputNM(e) {
      console.log("我是父组件的input", e);
    },
    searchChildren() {
      /* 从父组件中获取子组件的data以及方法：
          1.$children

                但是$children不太好 因为有角标
          
          */
      //   let zt=this.$children
      //   zt[0].wantSay()
      //   console.log(zt[0].saySomething)
      /* 
            2.$refs
                -使用refs需要在节点上添加ref属性
        */
      // console.log(this.$refs.zz.saySomething) .zz和['zz']效果相等
      // console.log(this.$refs["zz"].saySomething)
    },
  },

//   mounted() {
//        this.tellInputNM(e)
//   },
 
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
